<template xmlns:div="http://www.w3.org/1999/html">
<!--  <div style="font-family: '宋体';width: 1200px;min-height: 850px" id="pdfht">-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="12" :offset="11"><div class="weight font bottom">江苏惟新律师事务所</div></el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="12" :offset="13"><div class="weight bottom">地址:苏州工业园区苏虹东路183号</div></el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="12" :offset="14"><div class="weight bottom">东沙湖基金小镇7号楼3层</div></el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="12" :offset="14"><div class="weight bottom">电 话：13912772316</div></el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="12" :offset="12"><div class="grid-content bg-purple weight font bottom">律 师 函</div></el-col>-->
<!--    </el-row>-->
  <div>
    <span><el-button type="success" @click="onCreate">创建</el-button> <el-button type="primary" @click="saveSetmealContact">下载</el-button></span>
    <div id="pdfht" style="font-family: '宋体';min-height: 850px;color: black;width: 900px" >

      <div style="margin-bottom: 100px">&nbsp;&nbsp;&nbsp;</div>
      <div style="text-align: center" class="weight font bottom">江苏惟新律师事务所</div>
      <div class="weight bottom" style="padding-left: 500px">地 址:苏州工业园区苏虹东路183号</div>
        <div class="weight bottom" style="padding-left: 500px">东沙湖基金小镇7号楼3层</div>
      <div class="weight bottom" style="padding-left: 500px">
        电 话：13912772316</div>
      <div style="text-align: center;margin-bottom: 20px" class="weight font">律 师 函</div>
      <div>
        <div style="padding-left: 60px">
          <div style="padding-left: 80px;margin-bottom: 15px" class="weight font1">
         {{this.form.name}}:
          </div>
          <div  class="font1 bottom" style="padding-left: 127px">
            江苏惟新律师事务所接受{{this.form.mcc}}的委托，
          </div>
          <div class="font1 bottom" style="padding-left: 80px">
            指派卢小平律师就贵方与委托人手机租赁事宜，致函如下：
          </div>
          <div  class="font1 weight bottom" style="padding-left: 120px">
            一、根据委托人陈述、《租赁服务协议》、《订单系统截图</div>
          <div class="font1 weight bottom" style="padding-left: 80px">
            》、《签收回执单》、《快递物流截图》、《账单详情》等材料，
          </div>
          <div class="font1 weight bottom" style="padding-left: 80px">
            我们可以明确如下基本事实。
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            {{ this.form.createDate  }}，贵方通过{{this.form.platform}}平台向委托人租用了一部型号
          </div>
          <div class="font1 bottom" style="padding-left: 80px">
            为{{this.form.phoneModel}}的手机， {{ this.form.phoneStorage }}，月租金{{ this.form.monthRent }}元，租期为
          </div>
          <div class="font1 bottom" style="padding-left: 80px">
            {{ this.form.fixedTerm }}个月，所选套餐为：{{ this.form.combo }}。
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            委托人已按约定于{{ this.form.createDate }}寄出手机(物流单号：
          </div>
          <div class="font1 bottom" style="padding-left: 80px">
            {{ this.form.trackingNumber }})贵方于{{this.form.signDate}}签收了该手机。后贵方仅支付
          </div>

          <div  class="font1 bottom" style="padding-left: 80px">
            第{{this.form.first}}期租金，自第{{this.form.fourth}}期交租日（{{this.form.payMentDate}}）起，未再支
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            付过任何租金。委托人多次联系贵方，要求贵方按约定支付租金，但
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            贵方拒不支付。
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            根据《租赁服务协议》第{{ this.form.contract }}条的约定，委托人与贵方之间的租
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            赁服务关系已自动转变为买卖合同关系；根据《租赁服务协议》
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            的第{{ this.form.contract1 }}条约定，贵方应在收到委托人的书面通知之日起15日之
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            内向委托人支付手机的买断款{{ this.informationForm.paymentOut }}元（根据《租赁服务协议》的
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            第{{ this.form.contract2 }}条约定，买断款＝买断价－已付租金－线下支付，即买断款=
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            {{ this.informationForm.paymentOut1 }}元-{{ this.informationForm.paymentOut2 }}元-{{ this.informationForm.paymentOut3 }}元
            ={{ this.informationForm.paymentOut }}元）。
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            贵方长时间怠于付款的行为已经让委托人产生内心焦虑，并且也
          </div>
          <div style="margin-bottom: 300px"></div>
          <div style="margin-bottom: 150px"></div>
          <div  class="font1 bottom" style="padding-left: 80px;margin-top: 350px">
          有违贵方的付款承诺。故而委托人委托本律师向贵司发送律师函。
          </div>
          <div  class="font1 bottom weight" style="padding-left: 120px">
            二、律师意见。
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            本律师认为：贵方与委托人合作应本着诚实信用的原则。
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            贵方迟延向委托人付款的行为，已经违反我国《中华人民共和国
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            民法典》的相关规定，依法应当承担付款责任。
          </div>
          <div  class="font1 bottom weight" style="padding-left: 120px">
            为维护委托人的合法权益，本律师严正发表声明如下：
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            一、请贵方在收悉本律师函之日起十五日内立即向委托人支付买
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            断款人民币{{this.form.paymentOut}}元。
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            二、如若贵方不按上述期限履行付款义务，又未主动协商还款方
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            案，本律师将立即通过法律途径依法维护委托人的合法权益，并追究
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            贵方相关法律责任。
          </div>
          <div  class="font1 bottom" style="padding-left: 120px">
            届时，委托人将不再保留友好协商的余地；贵方不但面临账户被
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            冻结、财产被查封的法律风险，而且还需承担相应的逾期利息、诉讼
          </div>
          <div  class="font1 bottom" style="padding-left: 80px">
            费、律师费等额外费用，希慎重待之！
          </div>
          <div  class="font1 bottom weight" style="padding-left: 140px">
            顺 颂
          </div>
          <div  class="font1 bottom weight" style="padding-left: 80px">
            商  祺！
          </div>
          <div  class="font1 weight" style="padding-left: 500px;margin-bottom: 50px">
            江苏惟新律师事务所
          </div>
          <div  class="font1 weight" style="padding-left: 530px;margin-bottom: 50px">
            卢小平  律师
          </div>
          <div  class="font1 weight" style="padding-left: 510px;margin-bottom: 50px">
            {{ this.year}}年{{this.month}}月{{this.day}}日
          </div>

          <div  class="font1 bottom weight" style="padding-left: 80px">
            卢律师联系电话：13912772316
          </div>
        </div>
      </div>
<!--    </div>-->
  </div>

<div>
  <el-drawer
      title="租户信息"
      :visible.sync="dialogAudience"
      :size="size"
      >
    <div :style="{'max-height': this.timeLineHeight + 'px' }"  style="overflow-y: scroll">
      <el-form :inline="true" :rules="rules" ref="informationForm" :model="informationForm" class="demo-form-inline">
    <div style="padding-left: 60px">
      <div style="padding-left: 80px;margin-bottom: 15px" class="weight font1">
        <el-form-item prop="name">
          <el-input v-model="informationForm.name"style="width: 120px" placeholder="姓名"></el-input>
        </el-form-item>
      </div>
      <div  class="font1 bottom" style="padding-left: 127px">
        江苏惟新律师事务所接受<el-form-item prop="mcc">
        <el-input v-model="informationForm.mcc"style="width: 300px" placeholder="店铺名称"></el-input>
      </el-form-item>的委托，
      </div>
      <div class="font1 bottom" style="padding-left: 80px">
        指派卢小平律师就贵方与委托人手机租赁事宜，致函如下：
      </div>
      <div  class="font1 weight bottom" style="padding-left: 120px">
        一、根据委托人陈述、《租赁服务协议》、《订单系统截图</div>
      <div class="font1 weight bottom" style="padding-left: 80px">
        》、《签收回执单》、《快递物流截图》、《账单详情》等材料，
      </div>
      <div class="font1 weight bottom" style="padding-left: 80px">
        我们可以明确如下基本事实。
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        <el-form-item prop="createDate">
          <el-date-picker style="width: 160px"
         type="date" v-model="informationForm.createDate"
          value-format="yyyy年MM月dd日"
           placeholder="下单日期">
          </el-date-picker>
        </el-form-item>
        ，贵方通过
        <el-form-item prop="platform">
          <el-input v-model="informationForm.platform"style="width: 120px" placeholder="平台名称"></el-input>
        </el-form-item>
        平台向委托人租用了一部型
      </div>
      <div class="font1 bottom" style="padding-left: 80px">
        号为 <el-form-item prop="modelIphone">
        <el-input v-model="informationForm.modelIphone"style="width: 160px" placeholder="手机型号"></el-input>
      </el-form-item>的手机，   <el-form-item prop="phoneStorage">
        <el-input v-model="informationForm.phoneStorage"style="width: 140px" placeholder="颜色内存"></el-input>
      </el-form-item>，月租金<el-form-item prop="monthRent">
        <el-input v-model="informationForm.monthRent"style="width: 120px" placeholder="月租金"></el-input>
      </el-form-item>元，
      </div>
      <div class="font1 bottom" style="padding-left: 80px">
        租期为
        <el-form-item prop="fixedTerm">
          <el-input v-model="informationForm.fixedTerm"style="width: 80px" placeholder="租期"></el-input>
        </el-form-item>个月，所选套餐为：
        <el-form-item prop="combo">
        <el-input v-model="informationForm.combo"style="width: 220px" placeholder="套餐"></el-input>
      </el-form-item>。
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        委托人已按约定于 <el-form-item prop="sendDate">
        <el-date-picker
            type="date"
            v-model="informationForm.sendDate"
            value-format="yyyy年MM月dd日"
            style="width: 160px" placeholder="寄出日期"></el-date-picker>
      </el-form-item>寄出手机(物流单号：
      </div>
      <div class="font1 bottom" style="padding-left: 80px">
        <el-form-item prop="trackingNumber">
          <el-input v-model="informationForm.trackingNumber"style="width: 220px" placeholder="物流单号"></el-input>
        </el-form-item>
        )贵方于<el-form-item prop="signDate">
        <el-date-picker type="date" v-model="informationForm.signDate"
                        value-format="yyyy年MM月dd日"
                        style="width: 160px" placeholder="签收日期"></el-date-picker>
      </el-form-item>签收了该手机。后贵方仅
      </div>
      <div  class="font1 bottom" style="padding-left: 60px">
        支付第
        <el-form-item prop="first">
          <el-input v-model="informationForm.first"style="width: 150px" placeholder="支付的期数"></el-input>
        </el-form-item>
        期租金，自第
        <el-form-item prop="fourth">
          <el-input v-model="informationForm.fourth"style="width: 50px"></el-input>
        </el-form-item>
        期交租日（
        <el-form-item prop="payMentDate">
          <el-date-picker type="date" v-model="informationForm.payMentDate"
                          value-format="yyyy年MM月dd日"
                          style="width: 160px" placeholder="交租日期"></el-date-picker>
        </el-form-item>
        ）起，未再支付过任何租金。
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        委托人多次联系贵方，要求贵方按约定支付租金，但贵方拒不支付。
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        根据《租赁服务协议》第 <el-form-item prop="contract">
        <el-input v-model="informationForm.contract"style="width: 60px"></el-input>
      </el-form-item>条的约定，委托人与贵方之间的租
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        赁服务关系已自动转变为买卖合同关系；根据《租赁服务协议》
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        的第<el-form-item prop="contract1">
        <el-input v-model="informationForm.contract1"style="width: 60px"></el-input>
      </el-form-item>条约定，贵方应在收到委托人的书面通知之日起15日之
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        内向委托人支付手机的买断款 <el-form-item prop="paymentOut">
        <el-input v-model="informationForm.paymentOut"style="width: 100px" placeholder="买断款"></el-input>
      </el-form-item>元（根据《租赁服务协议》的
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        第<el-form-item prop="contract2">
        <el-input v-model="informationForm.contract2"style="width: 60px"></el-input>
      </el-form-item>条约定，买断款＝买断价－已付租金－线下支付，即买断款=
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        <el-form-item prop="paymentOut1">
          <el-input v-model="informationForm.paymentOut1"style="width: 100px" placeholder="买断价"></el-input>
        </el-form-item>
        元-
        <el-form-item prop="paymentOut2">
          <el-input v-model="informationForm.paymentOut2"style="width: 100px" placeholder="已付租金"></el-input>
        </el-form-item>
        元-
        <el-form-item prop="paymentOut3">
          <el-input v-model="informationForm.paymentOut3"style="width: 100px" placeholder="线下支付"></el-input>
        </el-form-item>
        元=
        <el-form-item prop="paymentOut">
          <el-input v-model="informationForm.paymentOut"style="width: 100px" placeholder="买断款"></el-input>
        </el-form-item>
        元
        ）。
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        贵方长时间怠于付款的行为已经让委托人产生内心焦虑，并且也
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        有违贵方的付款承诺。故而委托人委托本律师向贵司发送律师函。
      </div>
      <div  class="font1 bottom weight" style="padding-left: 120px">
        二、律师意见。
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        本律师认为：贵方与委托人合作应本着诚实信用的原则。
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        贵方迟延向委托人付款的行为，已经违反我国《中华人民共和国
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        民法典》的相关规定，依法应当承担付款责任。
      </div>
      <div  class="font1 bottom weight" style="padding-left: 120px">
        为维护委托人的合法权益，本律师严正发表声明如下：
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        一、请贵方在收悉本律师函之日起十五日内立即向委托人支付买
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        断款人民币
        <el-form-item prop="paymentOut">
          <el-input v-model="informationForm.paymentOut"style="width: 100px" placeholder="买断款"></el-input>
        </el-form-item>
        元。
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        二、如若贵方不按上述期限履行付款义务，又未主动协商还款方
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        案，本律师将立即通过法律途径依法维护委托人的合法权益，并追究
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        贵方相关法律责任。
      </div>
      <div  class="font1 bottom" style="padding-left: 120px">
        届时，委托人将不再保留友好协商的余地；贵方不但面临账户被
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        冻结、财产被查封的法律风险，而且还需承担相应的逾期利息、诉讼
      </div>
      <div  class="font1 bottom" style="padding-left: 80px">
        费、律师费等额外费用，希慎重待之！
      </div>
      <div  class="font1 bottom weight" style="padding-left: 140px">
        顺 颂
      </div>
      <div  class="font1 bottom weight" style="padding-left: 80px">
        商  祺！
      </div>
      <div  class="font1 weight" style="padding-left: 500px;margin-bottom: 50px">
        江苏惟新律师事务所
      </div>
      <div  class="font1 weight" style="padding-left: 530px;margin-bottom: 50px">
        卢小平  律师
      </div>
      <div  class="font1 weight" style="padding-left: 500px;margin-bottom: 50px">
        {{ this.year}}年{{this.month}}月{{this.day}}日
      </div>

      <div  class="font1 bottom weight" style="padding-left: 80px">
        卢律师联系电话：13912772316
      </div>
    </div>
        <div style="text-align: center">
          <el-button @click="dialogAudience = false">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </el-form>

    </div>



  </el-drawer>
</div>
  </div>
</template>

<script>
import {getPdf} from "../../../htmlToPdf";
import {shopName} from "@/api/order";
export default {

  data() {
    return {
      size:'900px',
      timeLineHeight:'',
      year:'',
      month:'',
      day:'',
      form: {
        name: 'XX',
        mcc:'',
        createDate:'2022年3月31日',
        phoneModel:'iPhone13Promax',
        phoneStorage:'远峰蓝256',
        monthRent:'612.42',
        fixedTerm:'12',
        combo:'租完归还 — 可随时买断',
        trackingNumber:'SF1361979731221',
        paymentNumber:'',
        region: '',
        sendDate: '',
        signDate:'',
        first:'',
        fourth:'',
        payMentDate:'',
        contract:'',
        contract1:'',
        contract2:'',
        paymentOut:'',
        paymentOut1:'',
        paymentOut2:'',
        paymentOut3:'',
        platform:'',
      },
      informationForm: {
        createDate:'',
        mcc:'',
        name: '',
        fixedTerm:'',
        trackingNumber: '',
        modelIphone: '',
        phoneStorage: '',
        combo:'',
        sendDate:'',
        signDate:'',
        first:'',
        fourth:'',
        payMentDate:'',
        contract:'',
        contract1:'',
        contract2:'',
        paymentOut:'',
        paymentOut1:'',
        paymentOut2:'',
        paymentOut3:'',
        platform:'',
      },

      rules:{
        name:[
          {
            required:true,message:'请输入姓名',trigger:'blur'
          }
        ],
        mcc:[
          {
            required:true,message:'请输入店铺名称',trigger:'blur'
          }
        ],
        createDate:[
          {
             required: true, message: '请选择下单日期', trigger: 'change'
          }
        ],
        sendDate:[
          {
            required: true, message: '请选择寄出日期', trigger: 'change'
          }
        ],
        payMentDate:[
          {
            required: true, message: '请选择交租日期', trigger: 'change'
          }
        ],
        signDate:[
          {
            required: true, message: '请选择签收日期', trigger: 'change'
          }
        ],
        modelIphone:[
          {
            required: true, message: '请输入手机型号', trigger: 'change'
          }
          ],
        phoneStorage:[
          {
            required: true, message: '请输入颜色内存', trigger: 'change'
          }
        ],
        monthRent:[
          {
            required: true, message: '请输入月租金', trigger: 'change'
          }
        ],
        fixedTerm:[
          {
            required: true, message: '请输入租期', trigger: 'change'
          }
        ],
        trackingNumber:[
          {
            required: true, message: '请输入物流单号', trigger: 'change'
          }
        ],
        combo:[
          {
            required: true, message: '请输入套餐', trigger: 'change'
          }
        ],

        first:[
          {
            required: true, message: '请输入期数', trigger: 'change'
          }
        ],
        fourth:[
          {
            required: true, message: '请输入期数', trigger: 'change'
          }
        ],
        contract:[
          {
            required: true, message: '请输入协议第几条', trigger: 'change'
          }
        ],
        contract1:[
          {
            required: true, message: '请输入协议第几条', trigger: 'change'
          }
        ],
        contract2:[
          {
            required: true, message: '请输入协议第几条', trigger: 'change'
          }
        ],
        paymentOut:[
          {
            required: true, message: '请输入买断款', trigger: 'change'
          }
        ],
        paymentOut1:[
          {
            required: true, message: '请输入买断价', trigger: 'change'
          }
        ],
        paymentOut2:[
          {
            required: true, message: '请输入已付租金', trigger: 'change'
          }
        ],
        paymentOut3:[
          {
            required: true, message: '请输入线下支付', trigger: 'change'
          }
        ],
        platform:[
          {
            required: true, message: '请输入平台名称', trigger: 'change'
          }
        ],

      },

      dialogAudience:false,
    }
  },
  mounted() {
    this.dates();

  },
  methods: {
    onCreate() {
   this.dialogAudience=true;
      this.timeLineHeight = document.documentElement.clientHeight - 90;
      window.onresize = () => {
        this.timeLineHeight = document.documentElement.clientHeight - 90;
      };
    },
    save(){
      this.$refs['informationForm'].validate((res) => {
        if (res) {
          this.form.name = this.informationForm.name;
          this.form.mcc=this.informationForm.mcc;
          this.form.createDate=this.informationForm.createDate;
          this.form.platform=this.informationForm.platform;
          this.form.phoneModel = this.informationForm.modelIphone;
          this.form.phoneStorage=this.informationForm.phoneStorage;
          this.form.monthRent=this.informationForm.monthRent;
          this.form.fixedTerm=this.informationForm.fixedTerm;
          this.form.combo=this.informationForm.combo;
          this.form.trackingNumber=this.informationForm.trackingNumber;
          this.form.sendDate=this.informationForm.sendDate;
          this.form.signDate=this.informationForm.signDate;
          this.form.first=this.informationForm.first;
          this.form.fourth=this.informationForm.fourth;
          this.form.payMentDate=this.informationForm.payMentDate;
          this.form.contract=this.informationForm.contract;
          this.form.contract1=   this.informationForm.contract1;
          this.form.contract2=   this.informationForm.contract2;
          this.form.paymentOut=    this.informationForm.paymentOut;
          this.form.paymentOut1=this.informationForm.paymentOut1;
          this.form.paymentOut2= this.informationForm.paymentOut2;
          this.form.paymentOut3=this.informationForm.paymentOut3;

            this.$message.success('保存成功');
            this.dialogAudience = false;

          // let param = this.informationForm.name;
          // console.log(param);
        } else {
          this.$message.error('所填信息不能为空');
          return false;
        }
      })
    },
    dates(){
      var date=new Date();
      var year=date.getFullYear();
      this.year=year;
      var month=date.getMonth()+1;
      var day =date.getDate();
      this.month = (month > 9) ? month : ("0" + month);
      this.day = (day < 10) ? ("0" + day) : day;
      // shopName().then(res=>{
      //  this.form.mcc=res.shopname;
      // })
    },
    saveSetmealContact(){

      getPdf(this.form.name+'律师函','pdfht');
    }
  }
}
</script>

<style lang="scss" scoped>
  .weight{
    font-weight: bold;
  }
  .font{
    font-size: 27px;
  }
  .font1{
    font-size: 22px;
  }
 .bottom{
   margin-bottom: 10px;
 }
 .height1{
   overflow: auto;
 }
</style>